<template>
  <div class="home">
    <v-header></v-header>
    <swiper :list="swiperList"></swiper>
    <icons :list="iconList"></icons>
    <recommend :list="recommendList"></recommend>
    <weekend :list="weekendList"></weekend>
  </div>
</template>

<script>
// @ is an alias to /src
import VHeader from '../components/header'
import Swiper from '../components/swiper'
import Icons from '../components/icons'
import Recommend from '../components/recommend'
import Weekend from  '../components/weekend'
import axios from 'axios'
import {mapGetters} from 'vuex'
export default {
  name: 'Home',
  components: {
    VHeader,
    Swiper,
    Icons,
    Recommend,
    Weekend
  },
  computed:{
    ...mapGetters(['city'])
  },
  data(){
    return {
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: [],
      lastCity:''
    }
  },
  mounted(){
    this._getHomeInfo()
    this.lastCity = this.city
    console.log('mounted')
  },
  activated(){
    // console.log(this.lastCity,this.city)
    // if(this.lastCity !== this.city){
    //   this._getHomeInfo()
    // }
    console.log('activited')
  },
  deactivated(){
    console.log('deactivated')
  },
  watch:{
    city(newValue,oldValue){
      console.log(newValue,oldValue)
      if(newValue!==oldValue){
        this._getHomeInfo()
      }
    }
  },
  methods:{
    _getHomeInfo(){
     
      axios.get('/api/home?city='+this.city).then((res)=>{
        if(!res.data.errno && res.data.data){
          const data = res.data.data.data
          this.swiperList = data.swiperList 
          this.iconList = data.iconList 
          this.recommendList = data.recommendList 
          this.weekendList = data.weekendList
          
        }
      })
     
    }
  }
}
</script>
